<!--
 * @FileDescription 毫米波显示目标信息设置
 * @Author 杨宇翔
 * @Date 20220530 19:21:39
 * @LastEditors 杨宇翔
 * @LastEditTime 20220530 19:21:39
-->
<template>
    <span>显示目标信息设置</span>
    <div class="container">
        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 显示目标信息设置 - ID" hidden value="Id"
            v-model="ObjectInformationComponent.Default.VisibleFields.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 显示目标信息设置 - ID">
            <img
                :src="ObjectInformationComponent.Default.VisibleFields.value.includes('Id') ? `/static/Exam/ic_checkbox_select.png` : `/static/Exam/ic_checkbox_normal.png`">
            <span class="fs16 colorblack">ID</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 显示目标信息设置 - 类型" hidden value="Type"
            v-model="ObjectInformationComponent.Default.VisibleFields.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 显示目标信息设置 - 类型">
            <img
                :src="ObjectInformationComponent.Default.VisibleFields.value.includes('Type') ? `/static/Exam/ic_checkbox_select.png` : `/static/Exam/ic_checkbox_normal.png`">
            <span class="fs16 colorblack">类型</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 显示目标信息设置 - X坐标" hidden value="PositionX"
            v-model="ObjectInformationComponent.Default.VisibleFields.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 显示目标信息设置 - X坐标">
            <img
                :src="ObjectInformationComponent.Default.VisibleFields.value.includes('PositionX') ? `/static/Exam/ic_checkbox_select.png` : `/static/Exam/ic_checkbox_normal.png`">
            <span class="fs16 colorblack">X坐标</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 显示目标信息设置 - Y坐标" hidden value="PositionY"
            v-model="ObjectInformationComponent.Default.VisibleFields.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 显示目标信息设置 - Y坐标">
            <img
                :src="ObjectInformationComponent.Default.VisibleFields.value.includes('PositionY') ? `/static/Exam/ic_checkbox_select.png` : `/static/Exam/ic_checkbox_normal.png`">
            <span class="fs16 colorblack">Y坐标</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 显示目标信息设置 - X速度" hidden value="VelocityX"
            v-model="ObjectInformationComponent.Default.VisibleFields.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 显示目标信息设置 - X速度">
            <img
                :src="ObjectInformationComponent.Default.VisibleFields.value.includes('VelocityX') ? `/static/Exam/ic_checkbox_select.png` : `/static/Exam/ic_checkbox_normal.png`">
            <span class="fs16 colorblack">X速度</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 显示目标信息设置 - Y速度" hidden value="VelocityY"
            v-model="ObjectInformationComponent.Default.VisibleFields.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 显示目标信息设置 - Y速度">
            <img
                :src="ObjectInformationComponent.Default.VisibleFields.value.includes('VelocityY') ? `/static/Exam/ic_checkbox_select.png` : `/static/Exam/ic_checkbox_normal.png`">
            <span class="fs16 colorblack">Y速度</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 显示目标信息设置 - 宽度" hidden value="SizeX"
            v-model="ObjectInformationComponent.Default.VisibleFields.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 显示目标信息设置 - 宽度">
            <img
                :src="ObjectInformationComponent.Default.VisibleFields.value.includes('SizeX') ? `/static/Exam/ic_checkbox_select.png` : `/static/Exam/ic_checkbox_normal.png`">
            <span class="fs16 colorblack">宽度</span>
        </label>

        <input type="checkbox" name="应用界面设置" id="应用界面设置 - 显示目标信息设置 - 高度" hidden value="SizeY"
            v-model="ObjectInformationComponent.Default.VisibleFields.value">
        <label class="basic-settings-list-item" for="应用界面设置 - 显示目标信息设置 - 高度">
            <img
                :src="ObjectInformationComponent.Default.VisibleFields.value.includes('SizeY') ? `/static/Exam/ic_checkbox_select.png` : `/static/Exam/ic_checkbox_normal.png`">
            <span class="fs16 colorblack">高度</span>
        </label>
    </div>
</template>

<script setup lang="ts">
import { ObjectInformationComponent } from './ExamComponent';
</script>

<style scoped>
span:not(label>span) {
    display: inline-block;
    width: calc(100% - 0.6rem);
    height: 5rem;

    margin-top: 2rem;
    margin-left: 0.6rem;
    padding-left: 1.4rem;

    color: #B1B1D4;
    font-size: 1.8rem;
    line-height: 5rem;

    border-bottom: solid 0.1rem #1F1F2D;
}

.container {
    padding-top: 1rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 3rem;
}

label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

label>span {
    color: #81859C;
    font-size: 1.6rem;
}
</style>